<template>
  <div class="rich-text">
    <el-form-item :label="colorLabel" class="mb-24" :label-width="labelWidth">
      <ColorSetting
        :color="color"
        :rich="true"
        :current-text="currentText"
        :is-empty="isEmpty"
        :once-empty="onceEmpty"
        @lostBlur="lostBlur"
        @globalChange="setGlobalColor"
        @input="(val) => $emit('update:color', val)"
        @replace="replaceText"
        @Changed="isChanged = true"
      />
    </el-form-item>
    <el-form-item :label="textLabel" :label-width="labelWidth" class="mb-24">
      <!-- <div
        ref="richTextInput"
        :style="{ minHeight: `${height}px` }"
        :contentEditable="true"
        placeholder="请输入内容"
        class="element"
        @blur="handleLostBlur"
        @input="handleChangeText"
        @focus="handleFocus"
        @keydown="handleKeydown"
        @paste="handlePaste"
        @beforeinput="beforeInput"
        @compositionstart="handlerCompositionStart"
        @compositionend="handlerCompositionEnd"
      ></div> -->
      <div
        ref="richTextInput"
        :style="{ minHeight: `${height}px` }"
        :contentEditable="true"
        placeholder="请输入内容"
        class="element"
        @blur="handleLostBlur"
        @input="handleChangeText"
        @focus="handleFocus"
      ></div>
      <!-- <span>{{ currentLen }}/{{ maxlength }}</span> -->
    </el-form-item>
  </div>
</template>

<script>
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  export default {
    components: {
      ColorSetting
    },

    props: {
      color: { type: String, default: '' },
      text: { type: String, default: '' },
      textLabel: { type: String, default: '文本' },
      colorLabel: { type: String, default: '文本颜色' },
      height: { type: Number, default: 117 }, // 默认高度
      labelWidth: { type: String, default: '106px' },
      maxlength: { type: Number, default: 0 }, // 最大限制
      allowNewLine: { type: Boolean, default: false } // 是否允许换行
    },
    data() {
      return {
        currentText: '', // 用于记录文本框的内容
        isEmpty: false, // 记录当前文本框内容是否为空
        onceEmpty: false, // 记录是否被清空过
        isChanged: false
      };
    },

    mounted() {
      this.$refs.richTextInput.innerHTML = this.text.replace(/rgba?\(.+?\)/g, 'rgba(51,51,51,1)');
      // 记录当前文本框的内容
      this.currentText = this.$refs.richTextInput.innerHTML;
      this.currentLen = this.$refs.richTextInput.innerText.length;
      // if (sessionStorage.getItem('text')) {
      //   this.$refs.richTextInput.innerHTML = sessionStorage.getItem('text');
      // }
    },

    // updated() {
    //   this.$emit(
    //     'update:text',
    //     this.isChanged
    //       ? this.$refs.richTextInput.innerHTML
    //       : `<span style="color:${this.color}">${this.$refs.richTextInput.innerText}<span>`
    //   );
    //   console.log(1);
    // },

    methods: {
      // beforeInput() {
      //   this.addInput(this.$refs.richTextInput);
      // },
      setRichText(text) {
        this.$nextTick(() => {
          this.$refs.richTextInput.innerHTML = text;
        });
      },
      // 改变展示文本效果
      handleChangeText() {
        this.$emit(
          'update:text',
          this.isChanged
            ? this.$refs.richTextInput.innerHTML
            : `<span style="color:${this.color}">${this.$refs.richTextInput.innerText}<span>`
        );

        // 每次文本框内容变化，都作记录
        this.currentText = this.$refs.richTextInput.innerHTML;
        // 记录当前输入的长度
        // this.currentLen = this.$refs.richTextInput.innerText.length;
        // 判断一下内容是否为空了,可能是剪切，也可能是回退
        this.onceEmpty = this.currentText === '<br>' || this.currentText === '' ? true : false;
        // 如果是被font标签包裹的
        if (this.isEmpty && this.currentText.includes('<font')) {
          this.currentText = this.$refs.richTextInput.innerText;
        }
        // this.addInput(this.$refs.richTextInput);
      },

      handleLostBlur() {
        const firstColor = this.text.match(/rgba?\(.+?\)/);
        this.isEmpty && this.$emit('change', firstColor ? firstColor[0] : 'rgba(51,51,51,1)');
        const curText = this.$refs.richTextInput.innerText;
        this.isEmpty = curText === '<br>' || curText === '' || curText === '\n' ? true : false;
      },

      handleFocus() {
        if (!this.isEmpty && this.onceEmpty) {
          this.$refs.richTextInput.innerHTML = `<span style='color:${this.color}'>${this.currentText}</span>`;
          this.$emit('update:text', this.$refs.richTextInput.innerHTML);
        }
      },

      // 设置全局颜色
      setGlobalColor(color) {
        // 清除文字的背景色
        const delBgcText = this.text.replace(/background-color:\s?.+?;/g, '');
        // 匹配rgba和十六进制颜色值，并取消贪婪匹配
        const replaceText = delBgcText.replace(/(rgba?\(.+?\)|#([a-fA-F0-9]{6}|[a-fA-F0-9]{3}))/g, color);
        // 同步数据
        this.$emit('update:text', replaceText);
        this.$nextTick(() => {
          this.$refs.richTextInput.innerHTML = this.text;
        });
      },

      // 选择颜色点确定后失去焦点
      lostBlur() {
        this.$nextTick(() => {
          this.$refs.richTextInput.blur();
        });
      },

      // 清空之后重置的文本框内容
      replaceText(newText) {
        this.$refs.richTextInput.innerHTML = newText;
        this.$emit('update:text', newText);
      }
      // #region
      // 监听输入事件
      // handleKeydown(e) {
      //   // const len = this.$refs.richTextInput.innerText.length;
      //   if (!this.allowNewLine && e.keyCode === 13) return e.preventDefault(); // 阻止按回车
      //   // const isPressKey = [8, 37, 39, 17, 16].includes(e.keyCode);
      //   // if (len >= this.maxlength) return e.preventDefault();
      // },

      // 粘贴事件，让富文本转换为纯文本
      // handlePaste(e) {
      //   e.stopPropagation();
      //   e.preventDefault();
      //   let text = '';
      //   const event = e.originalEvent || e;
      //   // 获取剪切板的内容，以文本的方式
      //   if (event.clipboardData?.getData) {
      //     text = event.clipboardData.getData('text/plain');
      //   } else if (window.clipboardData?.getData) {
      //     text = window.clipboardData.getData('Text');
      //   }
      //   const command = document.queryCommandSupported('insertText') ? 'insertText' : 'paste';
      //   document.execCommand(command, false, text);
      // },
      // handlerCompositionStart() {
      //   this.lock = false;
      // },
      // handlerCompositionEnd() {
      //   this.lock = true;
      //   this.addInput(this.$refs.richTextInput);
      // },
      // // 字数限制
      // addInput(ref) {
      //   // 是否已经结束输入
      //   if (this.lock) {
      //     const wordsLen = ref.innerText.length; // 获取文本的长度
      //     // 如果超出文本限制
      //     if (wordsLen > this.maxlength) {
      //       ref.innerHTML = this.fullContent;
      //     } else {
      //       this.fullContent = ref.innerHTML;
      //     }
      //     this.$emit('update:text', ref.innerHTML);
      //     this.replaceCaret(ref);
      //   } else if (this.fullContent) {
      //     // 目标对象：超过100字时候的中文输入法
      //     // 原由：虽然不会输入成功，但是输入过程中字母依然会显现在输入框内
      //     // 弊端：谷歌浏览器输入法的界面偶尔会闪现
      //     this.$emit('update:text', ref.innerHTML);
      //     this.lock = true;
      //     this.replaceCaret(ref);
      //   }
      // },
      // // 让光标定位到末尾
      // replaceCaret(ref) {
      //   // 创建一个空文本节点
      //   const target = document.createTextNode('');
      //   // 把空文本节点添加到指定的DOM中
      //   ref.appendChild(target);
      //   // 判断当前获得焦点的元素是否为输入框
      //   const isTargetFocused = document.activeElement === ref;
      //   // 判断文本节点是否有值 并且 焦点是否在输入框内
      //   if (target?.nodeValue !== null && isTargetFocused) {
      //     // 获取当前的选中状态
      //     const sel = window.getSelection();
      //     // 如果有选中
      //     if (sel) {
      //       // 创建一个Range对象
      //       const range = document.createRange();
      //       // 把该范围的开始点设置为指定的节点中的指定偏移量。
      //       range.setStart(target, target.nodeValue.length);
      //       range.collapse(true);
      //       sel.removeAllRanges();
      //       sel.addRange(range);
      //     }
      //     if (ref instanceof HTMLElement) ref.focus();
      //   }
      // }
      // #endregion
    }
  };
</script>

<style lang="scss" scoped>
  .element {
    position: relative;
    overflow-y: scroll;
    border: 1px solid #cecece;
    border-radius: 2px;
    padding: 5px 15px;
    width: 100%;
    line-height: 1.5;
    white-space: break-spaces;
    word-wrap: break-word;
    word-break: break-all;
    outline: none;
    transition: border-color 0.3s;
    cursor: text;

    &:focus {
      border-color: #0d79f4;
    }

    &:empty::before {
      color: #cdcdcd;
      content: attr(placeholder);
    }
  }

  // .limit {
  //   position: absolute;
  //   top: -3px;
  //   right: 0;
  //   color: #cecece;
  // }
</style>
